<template>
  <Select
    ref="iSelect"
    v-model="G_value"
    filterable
    transfer
    clearable
    :size="G_conf.size"
    :multiple="G_conf.multiple"
    :placeholder="$srv.getI18nByPath(G_conf.placeholder)"
    @on-change="onChange"
    @on-select="onSelect"
    :disabled="renderOpts.props.disabled"
  >
    <Option
      v-for="(opt, index) in G_conf.list"
      :value="opt.data[G_conf.keyField]"
      :label="
        G_conf.i18n.list
          ? $srv.getI18nByPath(`${opt.data[G_conf.displayField]}`)
          : `${opt.data[G_conf.displayField]}`
      "
      :key="index"
    >
      <!-- :tag="
        G_conf.i18n.list
          ? $srv.getI18nByPath(opt.data[G_conf.displayField])
          : opt.data[G_conf.displayField]
      " -->
      <div
        class="combobox-container"
        :style="{
          'grid-template-columns':
            'repeat(' +
            G_conf.field.length +
            ',' +
            100 / G_conf.field.length +
            '%)'
        }"
      >
        <div
          class="combobox-option"
          v-for="key in Object.keys(opt.data)"
          :key="key"
        >
          <!-- 图字库列表 -->
          <div
            class="combobox-option-item"
            v-if="opt.type === 'iconFont'"
            :class="['wy-icon', opt.data[key]]"
            :title="key"
          >
            {{
              G_conf.i18n.list
                ? $srv.getI18nByPath(opt.data[key])
                : opt.data[key]
            }}
          </div>
          <!-- 文字列表 -->
          <div
            class="combobox-option-item"
            v-else-if="opt.type === 'text'"
            :title="key"
          >
            {{
              G_conf.i18n.list
                ? $srv.getI18nByPath(opt.data[key])
                : opt.data[key]
            }}
          </div>
        </div>
      </div>
    </Option>
  </Select>
</template>
<script lang="ts">
import { Tsrv, T_srv, ifs, ts, I_conf, T_conf, vue } from './config';

@T_srv.comp
export default class oIconbox extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop() renderOpts: any;

  @T_srv.prop() params: any;

  @T_srv.ref(`iSelect`) refSelect: any;

  @T_srv.watch('disabled')
  onDisabledChange(val: boolean) {
    this.isDisabled = val;
  }

  @T_srv.watch('params')
  onParamsChange() {
    // this.setValue();
    this.initValue();
    this.initProps();
  }

  @T_srv.watch('renderOpts', { deep: true })
  onRenderOptsChange() {
    // this.initProps();
  }

  private G_list: Array<any> = [];

  /* 组件名 */
  private G_compName: string = 'oIconbox';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private isInTable: boolean = false;

  private G_conf: I_conf = new T_conf();

  private G_value: string | Array<any> = '';

  private isDisabled: boolean = false;

  private iconBoxConf: any = {
    i18n: {
      field: false, // 属性字段是否国际化转换
      list: false // 数据list是否国际化转换
    },
    multiple: false,

    placeholder: 'piece.oQueryLinkSettingc.buttonicon',
    // 过滤
    filter: {
      // $and: { name: 'xxx', name1: 8, $or: [{ name: 1 }, { name1: 2 }] } // 启用过滤会降低性能
    },
    // 列表字段
    field: ['key'], // 注意与数据对应顺序
    keyField: 'key', // 一行的key值字段
    displayField: 'key',
    // 数据列表
    list: this.getIconboxList()
  };

  private config: any = {};

  private G_paramsFromComp: string = null; // 参数来自哪个组件

  created() {
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.init();
    this.initConf();
    this.initProps();
    // this.setValue();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  private init() {
    this.G_paramsFromComp = this.renderOpts.props.getTcommand()?.compName;
    if (Tsrv.noValue(this.G_paramsFromComp)) {
      this.$msg(Tsrv.getI18nByValue('未定义的组件'));
      console.error('未定义的组件');
    }
  }

  public initValue(): void {
    if (this.G_paramsFromComp === 'oBaseGrid') {
      this.G_value = this.params.row[this.params.column.property];
    } else {
      this.G_value = this.params.data[this.params.property];
    }
  }

  private initConf() {
    this.config = Tsrv.utils.clone(this.iconBoxConf, true);
    const L_conf = this.G_conf;
    L_conf.multiple = !!this.config?.multiple;
    // this.G_value = this.config?.devaultValue ? this.config.devaultValue : '';
    this.G_conf.size = this.config?.size ? this.config.size : 'default';
    this.config?.placeholder && (L_conf.placeholder = this.config.placeholder);
    L_conf.field = Array.isArray(this.config?.field) ? this.config.field : [];
    L_conf.keyField = this.config?.keyField || '';
    L_conf.list = this.config?.list || [];
    L_conf.i18n.field = this.config?.i18n?.field || false;
    L_conf.i18n.list = this.config?.i18n?.list || false;
    L_conf.filter = this.config?.filter || false;
    L_conf.multiple = this.config?.multiple || false;
    L_conf.displayField = this.config?.displayField || '';
  }

  // 重置属性
  private initProps() {}

  public setValue(val: any = undefined) {
    if (!Tsrv.utils.noValue(this.params.column.property)) {
      this.G_value =
        val !== undefined
          ? val
          : this.params.row[this.params.column.property] === null
          ? ''
          : this.params.row[this.params.column.property];
    }
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  // 选择变化时
  private onChange(v: any) {
    this.setTableValue(v);
    this.emitEvent('dochange');
  }

  setTableValue(val: number | boolean | string) {
    if (this.params.property) {
      this.params.data[this.params.property] = val;
    } else {
      this.params.row[this.params.column.property] = val;
    }
  }

  emitEvent(event: string) {
    const ev = this.renderOpts.events;
    const params = Tsrv.utils.cloneNoMatchVue(this.params, true);

    let fns = null;
    for (const action in ev) {
      if (ev[action] && action === `on-${event}`) {
        fns = ev[action];
        break;
      }
    }
    if (fns !== null) fns(params);
  }

  // 选择时
  private onSelect(opt: any) {}

  // 获取图标库------------
  private getIconboxList(): Array<any> {
    const l_arr: Array<any> = [];
    for (const key of Tsrv.TiconsFont.getIcons()) {
      l_arr.push({ type: 'iconFont', data: { key } });
    }
    return l_arr;
  }
}
</script>
<style lang="scss" scoped>
.combobox-container {
  display: grid;
  // grid-template-columns: repeat(3, 33%);
  grid-column-gap: 5px;
  width: 100%;
  .combobox-option {
    .combobox-option-item {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    i {
      margin-right: 10px;
      font-style: normal;
    }
  }
}
</style>
